<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>小结</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        .box{
            width: 150px;
            height: 150px;
            background-color: #f00;
        }

        .inner {
            width: 100px;
            height: 100px;
            background-color: #00f;
        }
    </style>
</head>
<body>
    jQ $ele => ele
        1. $ele[index]
        2. $ele.get(index)
        本质：由DOM元素组成的数组
       ele => $ele
        $(ele) => $ele
        $("<p></p>") => $(createElement("p"))
    
    操作样式   -> 读取/设置
        $ele.css(styleName)
        $ele.css(styleName, styleValue)
        $ele.css({ styleName: styleValue, ... })

    操作类名
        $ele.addClass(one more className)
        $ele.removeClass(one more className)
        $ele.toggleClass(one more className)
        $ele.hasClass(one more className)

    操作属性
        $ele.attr(propName) 读取
        $ele.attr(propName, propValue) 设置
        $ele.attr({propName: propValue, ...}) 设置多个
        $ele.removeAttr(propName) 删除

        以上 attr 可以更换为 prop，二者区别：
            对于非标准属性，attr设置的值显示在标签上，prop设置的值添加到了DOM对象上，不在标签上显示
            对于表单选择的值，prop获取的 true/false， attr获取checked
    
    元素关系节点
        $ele.parent/children/next/prev/find/siblings()
    
    元素内容的操作
        $ele.html/text/val()
    
    操作元素
        $ele.before/after/prepend/append/replaceWith()
        克隆节点  $ele.clone(boolean 是否克隆事件)
        删除节点  $ele.remove() 删除自己，parentNode.removeChild(ele)

    事件
        $ele.事件名(事件处理函数);
        $ele.on(事件名, [委托元素], [参数], 事件处理函数);

        事件对象 -> data
        this -> DOM元素，委托事件中指向 委托的DOM元素

    <div class="box">
        <div class="inner"></div>
    </div>
    
    <script src="../lib/jquery/jquery.min.js"></script>
    <script type="text/javascript">
        
        var $box = $(".box");

        $box.on("click", function (){
            console.log("box的点击事件");
        })

        $("body").append($box.clone(true));

        $box.css("background-color", "#0f0");
        setTimeout(function (){
            $box.remove();
        }, 3000)
    </script>
</body>
</html>